//import {Vue} from "vue/types/vue";

module MC.UI {
    let tagJq: JQuery = null;
    let vue: Vue;
    let mcname;// = tagJq.attr('mcname');
    export function productPictureDiv(_vue) {
        vue = _vue;
        tagJq = $('productPictureDiv');
        mcname = tagJq.attr('mcname');
        create();
        bindEvent();
    }

    function create() {
        let html = `<table class="productPicture pictureDivTable">
               <tbody></tbody>
               </table>
               <a class="addPic button">添加照片</a>`;
        tagJq.addClass('productPictureDiv buttondiv');
        tagJq.append(html);
    }

    function bindEvent() {
        tagJq.find('.addPic').on('click', () => {
            MC.msg.Pic(function (json: any) {
               // addPictureDiv(json.name, json.src);
                let list=vue[mcname];
                if(!list){
                    list=[];
                }else{
                    list=JSON.parse(list);
                }
                list.push({
                        name:json.name,
                        src:json.src,
                });
                vue[mcname]=JSON.stringify(list);
                //console.log(json);
            }, '工作环境1,工作环境2,工位');
        });
        /*tagJq.on("change", (eve: any) => {
            console.log(eve);
        });*/
        vue.$watch(mcname, (imgDetails: any, oval: any) => {
            // console.log(nval, oval);
            var div = tagJq.find('.pictureDivTable .trPic');
            div.remove();
            if (imgDetails && imgDetails != '') {
                let list = JSON.parse(imgDetails);
                for (let i = 0; i < list.length; i++) {
                    let li = list[i];
                    addPictureDiv( li.name, li.src,false);
                }
            }
        });


    }

    function addPictureDiv(name: string, src: string,calleve=true) {
        var div = tagJq.find('.pictureDivTable');
        var html = $("<tr class=\"trPic\"><td class=\"name\">" + name + "</td>\n                <td class=\"right upImg imge\">\n                    <div class=\"file\" style=\"background-image: url(" + src + ");\">\n                        <input type=\"hidden\"  name=\"picsrc\" value=\"" + src + "\"/>\n\t\t\t\t\t\t<input type=\"file\" name=\"img\" />\n                    </div>\n                    <a class=\"deleteico\"></a>\n                </td>\n\t\t\t</tr>");
        $(div).append(html);
        html.find('.deleteico').on('click', function () {
            html.remove();
            upgetdata();
        });
        MC.API.bindFileUp(html.find('[type=file]'), function (src: string) {
            html.find('[name=picsrc]').val(src);
            html.find('.file').css('background-image', 'url(' + src + ')');
        });
        $('.productPictureDiv .NullPic').hide();
        if(calleve){
            upgetdata();
        }

    }

    function getImgDetails() {
        var list = tagJq.find('.pictureDivTable .trPic');
        var listImg = [];
        for (var i = 0; i < list.length; i++) {
            var li = $(list[i]);
            var one = {
                name: li.find('.name').text(),
                src: li.find('[name=picsrc]').val()
            };
            listImg.push(one);
        }
        return JSON.stringify(listImg);
    }

    function upgetdata() {
        let json = getImgDetails();
        //tagJq.val(json);
        let target = tagJq[0];
        target.value = json;
        Vue.set(vue, mcname, json);
        /* target.dispatchEvent(new Event('input'));
         target.dispatchEvent(new Event('change'));*/
        /// console.log(json);
    }
}